<template>
	<div class="login_container">
		<div class="login-box">
			<el-form :rules="rulesLogin" label-width="65px" class="login_form" :model="formLogin" ref="loginRef">
				<el-form-item label="用户名" prop="name">
					<el-input placeholder="请输入用户名" v-model="formLogin.name"></el-input>
				</el-form-item>
				
				<el-form-item label="密 码" prop="password">
					<el-input placeholder="请输入密码" v-model="formLogin.password"></el-input>
				</el-form-item>
				
				<el-form-item label="角 色">
				<el-select v-model="value" placeholder="请选择">
					<!-- lable显示在页面上的值，value是真实的值 -->
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
				</el-form-item>
				
				<el-form-item class="btns">
					<el-button type="primary" @click="register">确定</el-button>
					<el-button type="danger" @click="resetForm('loginRef')">重置</el-button>
				</el-form-item>
			   
			</el-form>
		</div>
		
	</div>
</template>

<script>
	export default {
		data(){
			return {
				//表单数据绑定对象
				formLogin: {
					name: 'tom',
					password: '000'
				},
				// 表单验证
				rulesLogin: {
					name: [
						{ required: true, message: '请输入用户名', trigger: 'blur' },
						{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
					]
				},
				options: [{
				  value: 1,
				  label: '我是商家'
				}, {
				  value: 2,
				  label: '我是买家'
				}],
				value: 1 ,//这里的1和options中的value值相对应

			};
		},
		methods: {
			resetForm(refobj){
				this.$refs[refobj].resetFields();
				// console.log(this)
			},
			register(){
				this.$refs.loginRef.validate(async(valida)=>{
					if(!valida) return;
					let data = new FormData();
				    data.append('name', this.formLogin.name);
				    data.append('password', this.formLogin.password);
					data.append('role', this.value);
					// console.log(data);
					// this.formLogin是对象不能直接传递
					const {data: res} = await this.$http.post("userapi/login/?action=register", data);
					// console.log(res);
					if(res.status == 1000){
						console.log("注册成功");
						this.$messagebox.alert("注册成功,返回登录", "返回");
						this.$router.push('/');
					}
					else {
						this.$message.error("注册失败");
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped="scoped">
	.login_container{
		background-color: #ff557f;
		height: 100%;
	}
	.login-box{
		width: 450px;
		height: 300px;
		border-radius: 3px;
		background-color: white;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.btns{
		display: flex;
		justify-content: flex-end;
	}
	.login_form{
		position: absolute;
		bottom: 20px;
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
</style>
